<template>
    <div>
        <div class="ser_box">
            <div class="ser_title">
                <h1>我们的服务</h1>
                <div class="ser_hx"></div>
                <p class="ser_tips">车型种类丰富、可随时更新、送车上门</p>
            </div>
            <div class="style_box">
                <template class="xh_boxs" v-for="el in sty_boxs1">
                    <div class="car_style"
                        :style="{ 'background': 'url('+el.sty_url+')','background-size': '100% 100%' }">
                        <div class="style_name">
                            <p class="style_name1">{{el.sty_Cname}}</p>
                            <p class="style_name11">{{el.sty_Ename}}</p>
                        </div>
                    </div>
                </template>
            </div>
            <div class="style_box">
                <template className="xh_boxs" v-for="el in sty_boxs2">
                    <div class="car_style"
                        :style="{ 'background': 'url('+el.sty_url+')','background-size': '100% 100%' }">
                        <div class="style_name">
                            <p class="style_name1">{{el.sty_Cname}}</p>
                            <p class="style_name11">{{el.sty_Ename}}</p>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </div>
</template>

<script setup>
import bgimg_jc from "../picture/轿车.jpg"
import bgimg_swc from "../picture/商务车.jpg"
import bgimg_yyc from "../picture/越野车.jpg"
import bgimg_dbc from "../picture/大巴车.jpg"
import bgimg_pc from "../picture/跑车.jpg"
import bgimg_hc from "../picture/豪车.jpg"
import bgimg_jhc from "../picture/婚车.jpg"
import bgimg_fc from "../picture/房车.jpg"
// let style_imgs=[img_dac,img_jc]
// let style_names=["大巴车","轿车"]
let sty_boxs1 = [
    { sty_url: bgimg_jc, sty_Cname: "轿车",sty_Ename:"CAR" },
    { sty_url: bgimg_swc, sty_Cname: "商务车",sty_Ename:"BUSINESS CAR"},
    { sty_url: bgimg_yyc, sty_Cname: "越野车" ,sty_Ename:"SUV"},
    { sty_url: bgimg_dbc, sty_Cname: "大巴车",sty_Ename:"BUS"}
]
let sty_boxs2 = [
    { sty_url: bgimg_pc, sty_Cname: "跑车",sty_Ename:"SPORTS CAR" },
    { sty_url: bgimg_hc, sty_Cname: "豪车",sty_Ename:"LUXURY CAR" },
    { sty_url: bgimg_jhc, sty_Cname: "婚车",sty_Ename:"WEDDING CAR" },
    { sty_url: bgimg_fc, sty_Cname: "房车",sty_Ename:"CARAVAN" }
]
</script>

<style scoped>
.ser_box {
    width: 1250px;
    height: 500px;
    margin: 0 auto;
    margin-top: 50px;
    text-align: center;
    /* background-color: bisque; */
}

.ser_title {
    margin-bottom: 40px;
}

h1 {
    font-weight: 400;
    color: black;
}

.ser_hx {
    width: 60px;
    margin: 0 auto;
    margin-top: 5px;
    border-bottom: 4px solid red;
}

.ser_tips {
    color: rgb(198, 197, 197);
}
/* 租车类型 */
.style_box {
    width: 100%;
    height: 140px;
    margin-top: 30px;
    display: flex;
    justify-content: space-evenly;
    align-content: center;
}

.car_style {
    width: 270px;
    margin-left: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all .2s;
    background-color: aquamarine;
}
.car_style:hover {
    /* opacity: 0; */
    transform: translate(-10px,-10px);
}
.style_name {
    height: 100px;
    color:white;
}
.style_name1 {
    height: 30px;
    font-size: 28px;
    margin-left: 10px;
}
.style_name11 {
    margin-top: 7px;
    height: 30px;
    margin-left: 10px;
    /* font-size: 2px; */
    
}
</style>